import React, { Component } from 'react'
import {
    Button,
    Modal
  } from 'antd'
  import {withRouter}  from 'react-router-dom'
import TableData from '../../components/table';
import * as axios from 'axios';
import '../../mock/mock.js'
const ButtonGroup = Button.Group
const titleMap = {
    id: 'id',
    name: '姓名',
    sex: '性别',
    age: '年龄',
    job: '职位',
    rule:'规则',
    ViolationName: '条款',
    content: '内容',
    operation: '操作'
  }
 class violationList extends Component {
     constructor(props) {
        super();
        this.state ={
            dataSource: [],
            columns: [],
            info: null,
            type: '',
            showDeleteModel: false,
            loading: false,
            add: true,
            export: true,
            isLoading: true,
        }
     }

     // 创建列
     createColumns =(keys) => {
      const result = keys.map((item) =>
         {
             return {
                title: titleMap[item],
                dataIndex: item,
                key: item,
             }
         }
         )
         result.push({
            title: '操作',
            key: 'action',
            render: (text, record) => {
              return (
                <ButtonGroup>
                  <Button size="small" type="primary" onClick={this.edit.bind(this, record)}>编辑</Button>
                  <Button size="small" type="danger" onClick={this.delete.bind(this, record)}>删除</Button>
                </ButtonGroup>
              )
            }
          })
         return result
     }

     // 编辑
     edit = (record) => {
        this.props.history.push({
            pathname: '/admin/violation/edit',
            state: record,
        });
     }

     // 删除
     delete =(record)=> {
        this.setState({
            showDeleteModel: true
        })
     }

     // 确认删除
     handleOk =()=> {
        this.setState({
            showDeleteModel: false
        })
     }

    componentDidMount() {
        axios.get('/getViolationList', {dataType:'json'}).then(res => {
            if(res.status === 200) {
                this.setState({
                    dataSource: res.data.viloationData,
                    columns: this.createColumns(Object.keys(res.data.viloationData[0])),
                    isLoading: false
                })
            } else {
                console.log('错误处理')
            }
        })
    }

    tableHandleBtnClick = (event)=> {
        switch(event.type) {
            case 'add':
                this.props.history.push({
                    pathname: '/admin/violation/edit',
                    state: null,
                });
                break;
                default:
                    alert('没有找到可以使用的路由!');
        }
    }

    render() {
        const tableConfig = {
            title: '违约单列表',
            dataSource: this.state.dataSource,
            columns: this.state.columns,
            btns: {
                add: this.state.add,
                export: this.state.export
            },
            keys: titleMap,
            isLoading: this.state.isLoading
        }
        const {showDeleteModel, loading} = this.state
        return (
            <div>
            <TableData config = {tableConfig} handleBtnClick={this.tableHandleBtnClick} />
            <Modal
                title="删除"
                visible={showDeleteModel}
                confirmLoading={loading}
                onCancel={() => {this.setState({
                    showDeleteModel: false
                })}}
                onOk={this.handleOk.bind(this)}
            >
            <div>
                <p>确认删除该条数据吗?</p>
            </div>
        </Modal>
            </div>
            
        );
    }
}
export default withRouter(violationList)